<template>
	<view class="contents">
		<view class="bgi">
			<image src="../../static/becomemenber.jpg" mode="widthFix"></image>
			<image class="avatarUrl" :src="avatarurl" mode=""></image>
			<view class="time" v-if="ismember">
				有效期至: {{overduetime | dateMember}}
			</view>
		</view>

		<view class="menulist">
			<view class="zhengti" v-for="(item,i) in menulist" :key="i">
				<view class="pic">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="title">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="open">
			<view class="price">
				￥{{price}}/{{cardtype.substring(0,1)}}
				<text
					style="text-decoration: line-through; font-size: 20rpx; color: red;">{{yprice}}/{{cardtype.substring(0,1)}}</text>
			</view>
			<button class="open_btn" @click="openMembership">
				{{ismember?'立即续费':'立即开通'}}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		openMembership,
		memberInfo,
		infoMember,
		membershipSet
	} from '@/api/api.js';
	import {
		dateMember
	} from '@/main.js'
	export default {
		data() {
			return {
				menulist: [{
						id: 1,
						name: '真溯源产品',
						img: '../../static/suyuanchanpin.png'
					},
					// {
					// 	id: 2,
					// 	name: '现磨鲜米',
					// 	img: '../../static/xianmoxianmi.png'
					// },
					{
						id: 3,
						name: '全场VIP特价',
						img: '../../static/wuzheqi.png'
					},
					// {
					// 	id: 4,
					// 	name: '会员日',
					// 	img: '../../static/huiyuanri.png'
					// // },
					// {
					// 	id: 5,
					// 	name: '返200元券',
					// 	img: '../../static/fanquan.png'
					// },
					{
						id: 6,
						name: '专属客服',
						img: '../../static/zhuanshukefu.png'
					},
				],
				// 用户头像
				avatarurl: '',
				// 是否是会员
				ismember: '',
				// 会员到期时间
				overduetime: '',
				// 会员价
				price: '',
				// 会员价原价
				yprice: '',
				// 会员卡类型
				cardtype: ''

			}
		},
		onLoad() {
			memberInfo().then(res => {
					// console.log(res)
					if (res.data.code == '200') {
						this.avatarurl = res.data.data.avatar
					}
				}),
				membershipSet().then(res => {
					// console.log(res)
					if (res.data.code == '200') {
						this.price = res.data.data[0].price
						this.yprice = res.data.data[0].original_price
						this.cardtype = res.data.data[0].title
					}
				}),

				this.infoMember()

		},
		onShow() {
			this.infoMember()
		},
		methods: {
			openMembership() {
				if (this.ismember) {
					uni.showModal({
						title: '温馨提示',
						content: `您已是会员，是否要立即续费？`,
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								uni.showLoading({
									title: '加载中'
								})
								let data = {
									from: 'weixin',
									link_pay_uid: 0,
									payType: 'weixin',
									pay_type_num: 10,
									pinkId: 0,
									special_id: 3
								}
								openMembership(data).then(res => {
									// console.log(res)
									if (res.data.code == '200') {
										uni.hideLoading()
										let obj = res.data.data.result.jsConfig
										uni.requestPayment({
											provider: 'wxpay', // 服务提提供商
											appId: obj.appid,
											timeStamp: obj.timestamp, // 时间戳
											nonceStr: obj.nonceStr, // 随机字符串
											package: obj.package,
											signType: obj.signType, // 签名算法
											paySign: obj.paySign, // 签名
											success: function(red) {
												console.log('支付成功', red);
												// this.ismember = true
												this.infoMember()
												uni.navigateBack()
											},
											fail: function(err) {
												console.log('支付失败', err);
												uni.showToast({
													title: '支付失败',
													duration: 2000
												})
											}
										});
									} else {
										uni.showToast({
											title: res.data.msg,
											duration: 2000
										})
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								return
							}
						}
					});

				} else {
					uni.showLoading({
						title: '加载中'
					})
					let data = {
						from: 'weixin',
						link_pay_uid: 0,
						payType: 'weixin',
						pay_type_num: 10,
						pinkId: 0,
						special_id: 3
					}
					openMembership(data).then(res => {
						// console.log(res)
						if (res.data.code == '200') {
							uni.hideLoading()
							let obj = res.data.data.result.jsConfig
							uni.requestPayment({
								provider: 'wxpay', // 服务提提供商
								appId: obj.appid,
								timeStamp: obj.timestamp, // 时间戳
								nonceStr: obj.nonceStr, // 随机字符串
								package: obj.package,
								signType: obj.signType, // 签名算法
								paySign: obj.paySign, // 签名
								success: function(red) {
									console.log('支付成功', red);
									// this.ismember = true
									this.infoMember()
									uni.navigateBack()
								},
								fail: function(err) {
									console.log('支付失败', err);
									uni.showToast({
										title: '支付失败',
										duration: 2000
									})

								}
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							})
						}
					})
				}

			},
			//会员剩余天数
			infoMember() {
				infoMember().then(res => {
					// console.log(res)
					if (res.data.code == '200') {
						this.overduetime = res.data.data.overdue_time * 1000
						let timestamp = new Date().getTime()
						console.log('当前时间：', timestamp)
						console.log('到期时间：', this.overduetime)
						if (timestamp < this.overduetime) {
							this.ismember = true
						}
					}
					console.log(this.ismember)
				})
			}

		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(245, 245, 245);

		.bgi {
			width: 100%;
			position: relative;

			image {
				width: 100%;
			}

			.time {
				position: absolute;
				left: 64rpx;
				top: 526rpx;
				color: #fff;
				font-size: 24rpx;
			}

			.avatarUrl {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				border: 1rpx solid #fff;
				position: absolute;
				left: 52rpx;
				top: 232rpx;
			}
		}


		.menulist {
			width: 100%;
			box-sizing: border-box;
			padding: 0 28rpx;
			display: flex;
			flex-wrap: wrap;
			margin-top: -335rpx;
			position: relative;

			.zhengti {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				height: 120rpx;

				.pic {
					border-radius: 40rpx;
					background-color: rgb(242, 247, 245);
					height: 80rpx;
					width: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 70rpx;
						height: 70rpx;
					}
				}

				.title {
					font-size: 24rpx;
				}
			}
		}


		.open {
			box-sizing: border-box;
			padding: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: 16rpx;
			left: 0;
			right: 0;

			.price {
				line-height: 80rpx;
				height: 80rpx;
				width: 45%;
			}

			.open_btn {
				border-radius: 40rpx;
				background-color: rgb(40, 153, 88);
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				width: 55%;
			}
		}
	}
</style>
